<!-- resources/templates/admin/crawler.html -->
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org"
      th:replace="~{layout/default :: html(
          ~{::title},
          ~{::main},
          ~{},
          ~{::script}
      )}">
<head>
    <title>爬虫管理 - 新闻分析系统</title>
</head>
<body>
<main>
    <h2 class="mb-4">爬虫管理</h2>
    
    <!-- 状态提示 -->
    <div th:if="${message}" class="alert alert-success alert-dismissible fade show" role="alert">
        <span th:text="${message}">操作成功</span>
        <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
    </div>
    
    <div th:if="${error}" class="alert alert-danger alert-dismissible fade show" role="alert">
        <span th:text="${error}">操作失败</span>
        <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
    </div>
    
    <div class="row">
        <!-- 爬虫状态 -->
        <div class="col-md-6 mb-4">
            <div class="card shadow-sm h-100">
                <div class="card-header bg-primary text-white">
                    <h5 class="mb-0">爬虫状态</h5>
                </div>
                <div class="card-body">
                    <div class="d-flex justify-content-between align-items-center mb-4">
                        <div>
                            <h6 class="mb-0">定时爬虫任务状态：</h6>
                            <div class="mt-2">
                                <span th:class="\'badge fs-6 \' + (${isRunning != null && isRunning} ? \'bg-success\' : \'bg-secondary\')">
                                    <span th:text="${isRunning != null && isRunning ? \'运行中\' : \'未运行\'}">状态</span>
                                </span>
                            </div>
                        </div>
                        <i class="bi bi-robot fs-1"></i>
                    </div>
                    
                    <div class="d-grid gap-2">
                        <form th:if="${isRunning == null || !isRunning}" th:action="@{/admin/crawler/start}" method="post">
                            <button type="submit" class="btn btn-success w-100">
                                <i class="bi bi-play-circle"></i> 启动定时爬虫
                            </button>
                        </form>
                        <form th:if="${isRunning != null && isRunning}" th:action="@{/admin/crawler/stop}" method="post">
                            <button type="submit" class="btn btn-danger w-100">
                                <i class="bi bi-stop-circle"></i> 停止定时爬虫
                            </button>
                        </form>
                    </div>
                </div>
            </div>
        </div>
        
        <!-- 手动爬取 -->
        <div class="col-md-6 mb-4">
            <div class="card shadow-sm h-100">
                <div class="card-header bg-warning text-dark">
                    <h5 class="mb-0">手动爬取</h5>
                </div>
                <div class="card-body">
                    <p>手动触发爬虫任务，从配置的新闻源爬取最新新闻。此操作将在后台运行，完成后会自动分析新闻内容。</p>
                    
                    <div class="accordion mb-3" id="siteAccordion">
                        <div class="accordion-item">
                            <h2 class="accordion-header" id="headingOne">
                                <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseOne" aria-expanded="false" aria-controls="collapseOne">
                                    查看可爬取的新闻源
                                </button>
                            </h2>
                            <div id="collapseOne" class="accordion-collapse collapse" aria-labelledby="headingOne" data-bs-parent="#siteAccordion">
                                <div class="accordion-body">
                                    <ul class="list-group">
                                        <li class="list-group-item">
                                            <strong>新浪新闻</strong>
                                            <small class="d-block text-muted">包括：首页、国内、国际、财经、科技、体育、娱乐、教育等频道</small>
                                        </li>
                                        <li class="list-group-item">
                                            <strong>网易新闻</strong>
                                            <small class="d-block text-muted">包括：首页、国内、国际、财经、科技、体育、娱乐、教育等频道</small>
                                        </li>
                                        <li class="list-group-item">
                                            <strong>腾讯新闻</strong>
                                            <small class="d-block text-muted">包括：首页、国内、国际、财经、科技、体育、娱乐、教育等频道</small>
                                        </li>
                                        <li class="list-group-item">
                                            <strong>搜狐新闻</strong>
                                            <small class="d-block text-muted">包括：首页、新闻中心、财经、科技、体育、娱乐、教育等频道</small>
                                        </li>
                                    </ul>
                                </div>
                            </div>
                        </div>
                    </div>
                    
                    <div class="row mb-3">
                        <div class="col-md-6">
                            <form th:action="@{/admin/crawler/crawl-all}" method="post">
                                <button type="submit" class="btn btn-warning w-100">
                                    <i class="bi bi-cloud-download"></i> 爬取所有网站
                                </button>
                            </form>
                        </div>
                        <div class="col-md-6">
                            <button type="button" class="btn btn-outline-primary w-100" data-bs-toggle="modal" data-bs-target="#selectSiteModal">
                                <i class="bi bi-filter"></i> 选择特定网站
                            </button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    
    <!-- 爬虫配置 -->
    <div class="card shadow-sm mb-4">
        <div class="card-header bg-info text-white">
            <h5 class="mb-0">爬虫配置</h5>
        </div>
        <div class="card-body">
            <div class="table-responsive">
                <table class="table table-striped">
                    <thead>
                        <tr>
                            <th>配置项</th>
                            <th>当前值</th>
                            <th>说明</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <td>线程池大小</td>
                            <td>4</td>
                            <td>爬虫任务并行执行的线程数，控制爬取速度和系统负载</td>
                        </tr>
                        <tr>
                            <td>定时爬取间隔</td>
                            <td>3小时</td>
                            <td>定时爬虫任务执行的时间间隔</td>
                        </tr>
                        <tr>
                            <td>新闻源配置</td>
                            <td>新浪、网易、腾讯、搜狐</td>
                            <td>默认爬取的新闻网站</td>
                        </tr>
                        <tr>
                            <td>自动分析</td>
                            <td>启用</td>
                            <td>爬取新闻后自动进行分类和情感分析</td>
                        </tr>
                        <tr>
                            <td>User-Agent</td>
                            <td>Mozilla/5.0 ...</td>
                            <td>爬虫请求头部的User-Agent字段</td>
                        </tr>
                    </tbody>
                </table>
            </div>
            
            <div class="alert alert-warning mt-3">
                <i class="bi bi-exclamation-triangle"></i> 注意：目前爬虫配置通过系统属性设置，若需修改请调整application.properties文件中的crawler.*配置项。
            </div>
        </div>
    </div>
    
    <!-- 爬取历史 -->
    <div class="card shadow-sm mb-4">
        <div class="card-header bg-secondary text-white">
            <h5 class="mb-0">最近爬取记录</h5>
        </div>
        <div class="card-body">
            <table class="table table-striped">
                <thead>
                    <tr>
                        <th>时间</th>
                        <th>来源</th>
                        <th>爬取数量</th>
                        <th>状态</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td th:text="${#temporals.format(#temporals.createNow().minusDays(1), \'yyyy-MM-dd HH:mm:ss\')}">2023-01-01 12:00:00</td>
                        <td>所有网站</td>
                        <td>127</td>
                        <td><span class="badge bg-success">成功</span></td>
                    </tr>
                    <tr>
                        <td th:text="${#temporals.format(#temporals.createNow().minusDays(1).minusHours(3), \'yyyy-MM-dd HH:mm:ss\')}">2023-01-01 09:00:00</td>
                        <td>定时任务</td>
                        <td>85</td>
                        <td><span class="badge bg-success">成功</span></td>
                    </tr>
                    <tr>
                        <td th:text="${#temporals.format(#temporals.createNow().minusDays(1).minusHours(6), \'yyyy-MM-dd HH:mm:ss\')}">2023-01-01 06:00:00</td>
                        <td>定时任务</td>
                        <td>72</td>
                        <td><span class="badge bg-success">成功</span></td>
                    </tr>
                    <tr>
                        <td th:text="${#temporals.format(#temporals.createNow().minusDays(1).minusHours(8), \'yyyy-MM-dd HH:mm:ss\')}">2023-01-01 04:00:00</td>
                        <td>新浪新闻</td>
                        <td>35</td>
                        <td><span class="badge bg-success">成功</span></td>
                    </tr>
                    <tr>
                        <td th:text="${#temporals.format(#temporals.createNow().minusDays(1).minusHours(10), \'yyyy-MM-dd HH:mm:ss\')}">2023-01-01 02:00:00</td>
                        <td>腾讯新闻</td>
                        <td>0</td>
                        <td><span class="badge bg-danger">失败</span></td>
                    </tr>
                </tbody>
            </table>
            
            <div class="text-center">
                <button class="btn btn-outline-secondary" disabled>查看更多记录</button>
            </div>
        </div>
    </div>
    
    <!-- 选择网站模态框 -->
    <div class="modal fade" id="selectSiteModal" tabindex="-1" aria-labelledby="selectSiteModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="selectSiteModalLabel">选择要爬取的网站</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <form id="siteSelectForm" th:action="@{/admin/crawler/crawl-site}" method="post">
                        <div class="mb-3">
                            <label for="siteName" class="form-label">网站</label>
                            <select class="form-select" id="siteName" name="siteName">
                                <option value="">-- 选择网站 --</option>
                                <option value="新浪新闻">新浪新闻</option>
                                <option value="网易新闻">网易新闻</option>
                                <option value="腾讯新闻">腾讯新闻</option>
                                <option value="搜狐新闻">搜狐新闻</option>
                            </select>
                        </div>
                    </form>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">取消</button>
                    <button type="button" class="btn btn-primary" onclick="document.getElementById(\'siteSelectForm\').submit();">开始爬取</button>
                </div>
            </div>
        </div>
    </div>
</main>

<script>
    // 自动关闭提示框
    window.setTimeout(function() {
        $(".alert").fadeTo(500, 0).slideUp(500, function(){
            $(this).remove(); 
        });
    }, 5000);
</script>
</body>
</html>
